import React, { useState, useEffect } from 'react';
import SelectLayout from '@/components/SelectLayout/index';
import 'taro-ui/dist/style/components/float-layout.scss';
import './index.scss';

const OrderCancleReason = ({ dispatch, isOpened, handleClose, handleSelected }) => {
  const [reasonList, setReasonList] = useState([]);

  useEffect(() => {
    if (isOpened && reasonList.length === 0) {
      dispatch({
        type: 'order/getOrderCancelReasonModel',
      }).then((ret) => {
        if (ret?.length > 0) {
          let reasonListDest = ret.map((item) => {
            return {
              value: item.cancelReason,
              code: item.cancelStatus,
            };
          });
          setReasonList(reasonListDest);
        }
      });
    }
  }, [isOpened]);

  return (
    <SelectLayout
      isOpened={isOpened}
      reasonList={reasonList || []}
      title="请选择取消订单的原因(必选)"
      btnTxt="确认取消"
      handleClose={handleClose}
      handleSelected={(item) => handleSelected(item.code)}
    />
  );
};
export default OrderCancleReason;
